<template>
  <div class="bubbles">
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.bubbles {
  position: absolute;
  height: 100%;
  width: 100%;
  font-size: 16px;
  overflow: hidden;
}

.bubble {
  opacity: 0;
  position: absolute;
  bottom: -1rem;
  width: 1rem;
  height: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

.bubble:nth-child(1) {
  left: 100%;
  animation: blow 14518ms infinite;
  animation-delay: 8517ms;
}

.bubble:nth-child(2) {
  left: 99%;
  width: 0.5rem;
  height: 0.5rem;
  animation: blow 5000ms infinite;
  animation-delay: 6061ms;
}

.bubble:nth-child(3) {
  left: 50%;
  animation: blow 5000ms infinite;
  animation-delay: 7907ms;
}

.bubble:nth-child(4) {
  left: 41%;
  width: 2.5rem;
  height: 2.5rem;
  animation: blow 5000ms infinite;
  animation-delay: 6034ms;
}

.bubble:nth-child(5) {
  left: 84%;
  width: 1.5rem;
  height: 1.5rem;
  animation: blow 5000ms infinite;
  animation-delay: 5052ms;
}

.bubble:nth-child(6) {
  left: 65%;
  animation: blow 7248ms infinite;
  animation-delay: 847ms;
}

.bubble:nth-child(7) {
  left: 21%;
  animation: blow 10573ms infinite;
  animation-delay: 6472ms;
}

.bubble:nth-child(8) {
  left: 23%;
  animation: blow 10437ms infinite;
  animation-delay: 9937ms;
}

.bubble:nth-child(9) {
  left: 76%;
  width: 2.5rem;
  height: 2.5rem;
  animation: blow 14988ms infinite;
  animation-delay: 2323ms;
}

.bubble:nth-child(10) {
  left: 16%;
  animation: blow 6571ms infinite;
  animation-delay: 6298ms;
}

.bubble:nth-child(11) {
  left: 6%;
  width: 1.5rem;
  height: 1.5rem;
  animation: blow 5000ms infinite;
  animation-delay: 10351ms;
}

.bubble:nth-child(12) {
  left: 96%;
  animation: blow 13040ms infinite;
  animation-delay: 2946ms;
}

.bubble:nth-child(13) {
  left: 96%;
  animation: blow 5000ms infinite;
  animation-delay: 2562ms;
}

.bubble:nth-child(14) {
  left: 49%;
  width: 1.5rem;
  height: 1.5rem;
  animation: blow 10717ms infinite;
  animation-delay: 11744ms;
}

.bubble:nth-child(15) {
  left: 93%;
  animation: blow 5855ms infinite;
  animation-delay: 701ms;
}

.bubble:nth-child(16) {
  left: 46%;
  animation: blow 9515ms infinite;
  animation-delay: 7813ms;
}

.bubble:nth-child(17) {
  left: 88%;
  width: 1.5rem;
  height: 1.5rem;
  animation: blow 5000ms infinite;
  animation-delay: 8715ms;
}

.bubble:nth-child(18) {
  left: 74%;
  animation: blow 8240ms infinite;
  animation-delay: 8249ms;
}

.bubble:nth-child(19) {
  left: 15%;
  width: 1.5rem;
  height: 1.5rem;
  animation: blow 11123ms infinite;
  animation-delay: 3244ms;
}

.bubble:nth-child(20) {
  left: 2%;
  width: 0.5rem;
  height: 0.5rem;
  animation: blow 12416ms infinite;
  animation-delay: 368ms;
}

.bubble:nth-child(21) {
  left: 77%;

  animation: blow 12753ms infinite;
  animation-delay: 7321ms;
}

.bubble:nth-child(22) {
  left: 44%;
  width: 1.5rem;
  height: 1.5rem;
  animation: blow 9477ms infinite;
  animation-delay: 2185ms;
}

.bubble:nth-child(23) {
  left: 58%;
  animation: blow 8167ms infinite;
  animation-delay: 861ms;
}

.bubble:nth-child(24) {
  left: 18%;
  width: 1.5rem;
  height: 1.5rem;
  animation: blow 9601ms infinite;
  animation-delay: 5377ms;
}

.bubble:nth-child(25) {
  left: 28%;
  width: 2.5rem;
  height: 2.5rem;
  animation: blow 14132ms infinite;
  animation-delay: 6400ms;
}

.bubble:nth-child(26) {
  left: 38%;
  animation: blow 7666ms infinite;
  animation-delay: 4946ms;
}

.bubble:nth-child(27) {
  left: 73%;
  animation: blow 8505ms infinite;
  animation-delay: 6384ms;
}

.bubble:nth-child(28) {
  left: 97%;
  width: 2.5rem;
  height: 2.5rem;
  animation: blow 5000ms infinite;
  animation-delay: 11164ms;
}

.bubble:nth-child(29) {
  left: 36%;
  width: 2.5rem;
  height: 2.5rem;
  animation: blow 8427ms infinite;
  animation-delay: 7633ms;
}

.bubble:nth-child(30) {
  left: 9%;
  width: 0.5rem;
  height: 0.5rem;
  animation: blow 13613ms infinite;
  animation-delay: 8711ms;
}

.bubble:nth-child(31) {
  left: 52%;
  animation: blow 5000ms infinite;
  animation-delay: 690ms;
}

.bubble:nth-child(32) {
  left: 35%;
  animation: blow 9066ms infinite;
  animation-delay: 3195ms;
}

.bubble:nth-child(33) {
  left: 21%;
  width: 0.5rem;
  height: 0.5rem;
  animation: blow 6776ms infinite;
  animation-delay: 9303ms;
}

.bubble:nth-child(34) {
  left: 92%;
  width: 1.5rem;
  height: 1.5rem;
  animation: blow 5000ms infinite;
  animation-delay: 4293ms;
}

@keyframes blow {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(0, -100vh) scale(0.2);
  }
}
</style>